<template>
  <div class="app-container">
    <el-button type="primary" @click = "addModal()">添加</el-button>
    <div style="float: right;">
      <el-input @keyup.enter.native="search" v-model="searchContent" style="width: 200px; margin-right: 10px; margin-bottom: 5px;" placeholder="请输入你要找的收费项目名称" clearable></el-input>
      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </div>

    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column width="50px" align="center" label="ID">
        <template slot-scope="scope">
        <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

<!--      <el-table-column align="center" label="所属小区">
        <template slot-scope="scope">
          <span>{{ scope.row.communityName }}</span>
        </template>
      </el-table-column> -->

      <el-table-column align="center" label="收费编号">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="收费项目名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="收费金额">
        <template slot-scope="scope">
          <span>{{ scope.row.money }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="update(scope.row)" circle></el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>


<!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="35%">
      <!-- 添加滚动条 -->
      <el-scrollbar style="height: 280px;">
        <el-form ref="form" label-width="80px">

<!--         <el-form-item label="所属小区">
            <el-select v-model="ItemForm.communityId" placeholder="请选择所属小区">
              <template v-for="item in communities">
                <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
              </template>
            </el-select>
          </el-form-item> -->

          <el-form-item label="收费编号">
            <input type="hidden" v-model="ItemForm.id" />
            <el-col :span="15">
              <el-input placeholder="填写如:0001" v-model="ItemForm.code"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="收费项目名称">
            <el-col :span="15">
              <el-input placeholder="请输入收费项目名称" v-model="ItemForm.name"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="收费金额">
            <el-col :span="20">
              <el-input type="textarea" placeholder="请输入收费金额" v-model="ItemForm.money"></el-input>
            </el-col>
          </el-form-item>

        </el-form>
      </el-scrollbar> <!-- end 滚动条 -->

      <span slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="saveInfo()">保 存</el-button>
      </span>
    </el-dialog> <!-- end 对话框 -->


    <!-- page-size 默认每页显示条数 -->
    <div class="block">
      <el-pagination
        @size-change="selectPage"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import myUtil from '../../../utils/myUtil'

export default {
  name: 'ItemList',
  data() {
    return {
      list: [],
      title: "添加",
      communities: [],
      ItemForm:{
        id: null,
        communityName: "",
        code: "",
        name: "",
        money: "",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      total: 0, // 总条数
      totalPage: 0, // 总页数
      curPage: 1, // 当前页
      rows: 5, // 每页显示条数
      isShow: false,
      searchContent: "", //搜索内容
      stashList: [],
    }
  },
  methods: {
    getList() {
      var self = this;
      this.axios({
        method: 'get',
        url: myUtil.url + '/tb-charge-item/list',
        params: {
          "page": self.curPage,
          "row": self.rows
        }
      }).then(function(rs){
        //console.log(rs);
        self.list = rs.data.info;
        self.total = rs.data.total;
        self.totalPage = rs.data.totalPage;
        self.stashList = rs.data.info;
      });
    },
    getCommunities() {
      var self = this;
      this.axios.get(myUtil.url + "/tb-community/communities").then((rs) => {
        //console.log(rs);
        self.communities = rs.data;
      })
    },
    addModal() {
      this.isShow = true;
      this.title = "新增收费项目";
      this.ItemForm.id = null;
      this.ItemForm.communityName = "";
      this.ItemForm.code = "";
      this.ItemForm.name = "";
      this.ItemForm.money = "";
    },
    update(x){
      this.isShow = true;
      this.title = "收费项目信息修改";
      this.ItemForm.id = x.id;
      this.ItemForm.communityName = x.communityName;
      this.ItemForm.code = x.code;
      this.ItemForm.name = x.name;
      this.ItemForm.money = x.money;
    },
    del(x) {
      var self = this;
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete(myUtil.url + "/tb-charge-item/del/" + x.id).then((rs) => {
          //console.log(rs);
          if(rs.data.info == "删除成功"){
            this.$message({
            type: 'success',
            message: '删除成功!'
            });
            this.getList();
          }
        })
      }).catch(() => {
        this.$message({
      	type: 'info',
      	message: '已取消删除'
        });
      });
    },
    saveInfo() { // 保存
      var self = this;
      if(this.title == "新增收费项目"){
        console.log(this.ItemForm);
        this.axios.post(myUtil.url + "/tb-charge-item/add", self.ItemForm).then((rs) => {
          //console.log(rs);
          if (rs.data.info == "添加成功") {
            // 关闭模态框
            self.isShow = false;

            this.$notify({
              title: '成功',
              message: rs.data.info,
              type: 'success',
              duration: 2000
            });
            // 刷新
            self.getList();
          }
        })
      } else if(this.title == "收费项目信息修改"){
        //console.log(this.ItemForm);
        this.axios.put(myUtil.url + "/tb-charge-item/update", self.ItemForm).then((rs) => {
          //console.log(rs);
          if (rs.data.info == "修改成功") {
            // 关闭模态框
            self.isShow = false;

            this.$notify({
              title: '成功',
              message: rs.data.info,
              type: 'success',
              duration: 2000
            });
            // 刷新
            self.getList();
          }
        })
      }
    },
    handleCurrentChange(v){ // 当前页触发事件
      this.curPage = v;
      this.getList();
    },
    selectPage(v) { // 用户选择页数
      this.rows = v;
      this.getList();
    },
    search() {
      if (this.searchContent != "") {
        this.list = this.stashList
        this.list = this.list.filter(item => {
          return item.name.includes(this.searchContent)
        })
      } else {
        this.list = this.stashList
      }
    },
  },
  mounted() {
    this.getList();
    this.getCommunities();
  }
}
</script>

<style scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}

.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
